import React from 'react'
import EquipmentItem from '../components/EquipmentItem'
import socket from '../Socket'
import $$8 from '../TitanV81';
import $$E from '../TitanEventManager';

$$E.initEnv(socket);

const List = () => {
    const [list, setList] = React.useState([])
    const [flg, setFlg] = React.useState(true)
    
    $$E.register("comList", function(data) {
        if(!$$8.isDefined(data)) {
            return false;
        }
        setFlg(false)
        setList(data)
        return true;
    });
    
    React.useEffect(() => {
        if (flg) {
            //socket.emit('comList','')
            $$E.call('comList');
        }
    }, [flg]);
    
    const refreshList = () => {
        setList([])
        setFlg(true)
    };
    
    return (
        <>
            <div className="card-body">
              {list && list
              .map((item, inx) => (<EquipmentItem key={inx} href={'#绝缘/数据上传'}  {...item} />))}
            </div>
            <footer className="fixed-bottom">
              <div className="row bg-dark text-white px-2">
                <div className="col item-middle">
                  {
                    flg && (
                      <>
                        <i className={`fa fa-spin fa-refresh  fa-fw`} aria-hidden="true"></i>
                        正在扫描串口,请勿操作页面...
                      </>
                    )
                  }
                </div>
                <div className="btn-group btn-group-sm pull-right">
                  <button className="btn btn-success rounded-0" disabled={flg} onClick={refreshList}>点击此处开始串口设备</button>
                </div>
              </div>
            </footer>
        </>
    );
}

export default List